// 显示页数 默认是第1页
let page = 1;
// 每页显示数据数量 默认是 4 条
let line = 4;

// 调用函数 动态渲染生成页面
setPage();

// 调用函数 根据 url地址栏 cat_one_id 发送请求 动态渲染生成页面
async function setPage() {
    // 获取当前浏览器地址栏参数数据
    const urlObj = myGetUrlVal();

    // 向 PHP程序 发送请求 获取结果
    const res = await myPromiseJQueryAjax('../server/goods_list.php', 'get', { cat_one_id: urlObj.cat_one_id, page: page, line: line, }, 'json');
    console.log(res);

    // 动态生成页面内容
    let str = '';

    res.data.forEach(item => {
        str += `
      <li class="list-item">
        <div class="panel panel-primary">
          <div class="panel-body">
            <ol class="breadcrumb">
              <li><a href="#">${item.cat_one_id}</a></li>
              <li><a href="#">${item.cat_two_id}</a></li>
              <li class="active">${item.cat_three_id}</li>
            </ol>
          </div>
          <div class="panel-footer">
            <div class="row">
              <div class="">
                <div class="thumbnail">
                  <img src="${item.goods_big_logo}" alt="...">
                  <div class="caption">
                    <h3>${item.goods_name}</h3>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <p>
                      <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                      <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    `;
    })

    // 创建ul标签节点
    const oUl = $('<ul></ul>');

    // 写入ul标签中li标签字符串
    oUl.html(str);

    // 清空ul的父级标签
    $('.container').html('');

    // 写入ul标签节点
    $('.container').append(oUl);

    // 设定 分页显示插件的配置参数
    $('[name="p"]').pagination({
        pageCount: res.sumPage,         //  当前数据对应的总页数
        totalData: res.row,             //  总数据数量
        current: res.page,             //  当前页数
        showData: res.line,             //  当前每页数据数量
        prevContent: '上一页',          //  上一页节点内容
        nextContent: '下一页',          //  下一页节点内容
        prevCls: 'prev',                 //  上一页的class
        nextCls: 'next',                 //  下一页的class
        activeCls: 'active',             //  选中状态类名
        mode: 'fixed',                 //  固定分页按钮数量
        count: 4,                      //  除了选中按钮之外 其他分页按钮的个数 也就是设定4 一共5个按钮
        coping: true,                   //  是否开启首页末页
        homePage: '首页',               //  首页内容
        endPage: '末页',                //  末页内容
        isHide: true,                  //  总页数为 0 / 1 隐藏分页插件 
        keepShowPN: true,              //  是否一直显示 上一页 下一页
        jump: true,                     //  跳转指定页数
        callback: function (result) {     //  分页插件的回调函数 点击分页插件按钮时执行
            // // 回调函数的形参中 存储的分页插件对象
            // console.log(result);
            // // 其中 result.getCurrent() 获取 点击分页插件按钮 对应的页数
            // console.log( result.getCurrent() );

            // 根据 result.getCurrent() 获取的页数 再次发起请求 获取数据库数据 动态渲染生成新的页面内容
            page = result.getCurrent();

            // 再次调用函数动态渲染生成页面
            setPage();
        }
    });

}

/*
      1,  根据 url地址栏中 传参 cat_one_id 的名称 动态渲染生成页面内容
        获取url地址栏中的参数数据  向PHP程序发送请求
        向 server/goods_list.php 发送请求
          以 get方式 携带 3个 参数
          键名是 
            cat_one_id   商品一级分类名称
            page         当前显示页面的页数 默认显示第一页内容
            line         每页显示的数据数量 目前定义 4 条数据

          根据结果 动态渲染生成页面

        响应体数据说明

          data: Array(4)
            0: {goods_id: '608', goods_name: '世源全屋成套灯具套餐客厅灯卧室灯组合三室两厅客厅灯套装简约现代吸顶灯LED水晶灯饰91191', goods_price: '102.00', goods_number: '211', goods_weight: '100', …}
            1: {goods_id: '609', goods_name: '吊灯吸顶灯北欧客厅吊灯餐厅卧室吊灯后现代个性创意设计师吊灯时尚艺术灯具', goods_price: '478.00', goods_number: '234', goods_weight: '100', …}
            2: {goods_id: '612', goods_name: '雷士照明(NVC) 美式乡村吊灯简欧欧式客厅灯饰简约创意书房卧室餐厅北欧灯具铁艺吊灯', goods_price: '168.00', goods_number: '115', goods_weight: '100', …}
            3: {goods_id: '613', goods_name: '蒙特丽水晶吊灯客餐厅卧室灯 金树银花灯饰具5052-420', goods_price: '368.00', goods_number: '227', goods_weight: '100', …}
            length: 4
            [[Prototype]]: Array(0)
          line: "4"
          page: "1"
          row: "93"
          sumPage: 24


          data    存储 数组 是 查询的 4条数据结果 
                  根据 data 中 存储的数据 动态渲染生成页面内容
          line    每页显示4条数据
          page    当前页数
          row     当前分类一共有93条数据
          sumPage 一共有 24 页

          动态生成的页面内容 图片来源是 网络图片 最好添加 meta标签

          
      2,  分页显示
        使用插件完成分页显示效果  jquery-pagination
        是 一款 基于 jQuery语法的 插件
        所谓的插件 就是别人写好的js外部文件 我们导入加载使用就可以了

        操作步骤 
          (1) 需要导入 jQuery文件 和 jquery-pagination插件文件
          (2) 创建一个标签 向这个标签中 写入 分页显示内容
          (3) 以对象的形式 设定 分页显示的相关属性
          (4) 参数中 callback 配置的是 分页插件的回调函数
              点击 分页插件按钮 触发的函数程序
              会 将点击的分页插件相关的数据 存储到 回调函数的形参中
              其中 形参.getCurrent() 函数方法 获取的是 点击按钮对应的页数
              根据 分页插件 点击按钮 对应的页数 再次发起请求 再次动态渲染生成页面内容

      3,  查看商品详情
        点击跳转 详情页 同时 携带 参数 当前商品的 goods_id 

    */
